<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./jquery.min.js"></script>
    <title>淘宝精品服饰案例</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            list-style: none;
            text-decoration: none;
        }
        a {
            width: 100%;
            height: 100%;
            border-bottom: 1px solid #f40;
            text-align: center;
            color: #000;
        }
        ol {
            width: 250px;
            float: left;
            height: 260px;
        }
        img {
            width: 100%;
            vertical-align: top;
            height: 260px;
        }
        ul {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            width: 50px;
            border: 1px solid #f40;
            background-color: lightpink;
        }
        .box {
            width: 300px;
            height: 260px;
            display: flex;
            margin: 10px auto;
        }
        .hover {
            background-color: #f40;
            color: aliceblue !important;
        }
        ol li  {
            display: none;
        }
        .img1 {
            display: block;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <a class="hover" href="javascript:;">
                <li>女鞋</li>
            </a>
            <a href="javascript:;">
                <li>女鞋</li>
            </a>
            <a href="javascript:;">
                <li>女鞋</li>
            </a>
            <a href="javascript:;">
                <li>女鞋</li>
            </a>
            <a href="javascript:;">
                <li>女鞋</li>
            </a>
            <a href="javascript:;">
                <li>女鞋</li>
            </a>
            <a href="javascript:;">
                <li>女鞋</li>
            </a>
            <a href="javascript:;">
                <li>女鞋</li>
            </a>
            <a href="javascript:;">
                <li>女鞋</li>
            </a>
        </ul>
        <ol>
            <li style="display:block;"> <img  src="./01.png" alt=""></li>
            <li> <img src="./02.png" alt=""></li>
            <li> <img src="./03.png" alt=""></li>
            <li> <img src="./01.png" alt=""></li>
            <li> <img src="./02.png" alt=""></li>
            <li> <img src="./03.png" alt=""></li>
            <li> <img src="./01.png" alt=""></li>
            <li> <img src="./02.png" alt=""></li>
            <li> <img src="./03.png" alt=""></li>
        </ol>
        <script>
            $(function () {
                var index = 0;
                $('ul a').mouseenter(function () {
                    index = $(this).index();
                    $(this).siblings().removeClass('hover');
                    $(this).addClass('hover');
                    $('ol li').eq(index).show().siblings().hide();
                    // $('ol li').eq(index);
                })
                $('ul a').mouseleave(function () {
                    $(this).siblings().removeClass('hover');
                })
            })
        </script>
    </div>
</body>

</html>